import React, { useState, useEffect, useRef } from 'react';
import * as echarts from 'echarts';

import './index.less';
export default function ChartLine(props) {
  const { v } = props;
  const chartRef = useRef(null);
  const [myChart, setMyChart] = useState(null);
  const [echartsInterval, setEchartsInterval] = useState(null);

  useEffect(() => {
    renderChart();
  }, [v]);

  useEffect(() => {
    activeEcharts(-1, v.dataX.length);
  }, [myChart]);

  const renderChart = () => {
    const option = getChartOption();
    let chartInstance = null;
    const chart = echarts.getInstanceByDom(chartRef.current);
    if (chart) {
      chartInstance = chart;
    } else {
      chartInstance = echarts.init(chartRef.current, 'dark');
    }
    setMyChart(chartInstance);
    chartInstance.setOption(option);
  };

  const activeEcharts = (currentIndex, all) => {
    // 数据长度
    let dataLength = all;
    // 清空tooltip定时器
    clearTimeout(echartsInterval);
    // 加载tooltip定时器
    const interval = setTimeout(() => {
      // 获取当前显示第几个数据，从0 开始。（取 显示次数除以数据长度的余数）
      currentIndex = (currentIndex + 1) % dataLength;
      // echarts的触发图表行为
      myChart.dispatchAction({
        type: 'showTip', // 触发的行为
        seriesIndex: 0, // 触发的数据对应的坐标系（通常只有一个y轴，取0）
        dataIndex: currentIndex, // 第几个数据显示toolTip
      });
      activeEcharts(currentIndex, all);
    }, 2000);
    setEchartsInterval(interval);
  };
  const width8 = (screen.width * 24) / 6299;
  const width12 = (screen.width * 70) / 6299;
  const width20 = (screen.width * 50) / 6299;
  const width35 = (screen.width * 186) / 6299;

  const fontSize14 = (screen.width * 100) / 6299;
  const Color = ['#40A0FF', '#33CCCC', '#FFE76D', '#C14AFF'];
  const getChartOption = () => {
    // 数据
    const optionList = v;
    let arr = optionList.data.map((item, index) => ({
      name: item.name,
      type: 'line',
      data: item.data,
      symbol: 'none',
      smooth: true,
      areaStyle: {
        normal: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: Color[index] },
              { offset: 0.8, color: 'rgba(25,163,223, 0)' },
              { offset: 1, color: 'rgba(0,0,0,0)' },
            ],
          },

          shadowColor: 'rgba(25,163,223, 0.5)',
          shadowBlur: width20,
        },
      },
    }));
    const option = {
      backgroundColor: 'transparent',
      color: Color,
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgb(0, 33, 82)',
        textStyle: {
          fontSize: fontSize14,
          color: 'white',
        },
        borderColor: '#4da0f8d6',
        // position: function (point, params, dom, rect, size) {
        //   return {
        //     left: point[0],
        //     bottom: Math.floor(Math.random() * 45 + 30),
        //   };
        // },
      },
      legend: {
        icon: 'rect',
        itemWidth: width12,
        itemHeight: width8,
        itemGap: width35,
        textStyle: {
          fontSize: fontSize14,
          color: '#fff',
        },
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            // color: 'rgba(59, 78, 103, 1)',
            color: 'rgba(179, 223, 255, 1)',
          },
        },
        axisLabel: {
          fontSize: fontSize14,
          color: 'rgba(187, 224, 248, 1)',
        },
        data: optionList.dataX,
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(59, 78, 103, 1)',
          },
        },
        axisLabel: {
          fontSize: fontSize14,
          color: 'rgba(187, 224, 248, 1)',
        },
      },
      series: arr,
    };
    return option;
  };

  return <div className="line_chart" ref={chartRef}></div>;
}
